<template>
  <div id="service-control" class="relative">
    <page-loading></page-loading>
    <div class="form-wrap mb20">
      <div class="form-title">{{form2.title}}：</div>
      <!-- <span class="add" @click="cloudLogin">{{form2.fields[0].operate}}</span> -->
      <os-input :item="form2.fields[0]" v-model="cloud_id" @operate="cloudLogin"></os-input>
      <os-input :item="form2.fields[1].label" v-model="device_desc"></os-input>
      <div class="value alone-right">
        <div class="btn btn-blue" @click="set_ac_info">{{$t('btn.save')}}</div>
      </div>
    </div>
    <div class="toolbar">{{$t('service.cloud.toolbar')}}</div>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        cloud_login: {},
        cloud_id: '',
        device_desc: '',
      }
    },
    computed: {
      form1(){
        return this.$t('service.cloud.form1')
      },
      form2() {
        return this.$t('service.cloud.form2')
      },
      connect_status(){
        if(this.cloud_login.status){
          return '已连接（1161）'
        } else {
          return '未连接'
        }
      }
    },
    methods: {
      get_ac_info(){
        this.$req.get('/webapi?op=get_ac_info').then(res=> {
          const { device_owner, device_desc, } = res
          this.device_desc = device_desc ? device_desc : ''
          this.cloud_id = device_owner ? device_owner : ''
        })
      },
      set_ac_info(){
        this.proxy_req('get', '/webapi?op=set_ac_info', {
          device_owner: this.cloud_id,
          device_desc: this.device_desc,
        }, null, true,)
      },
      cloudLogin(){
        console.log("ok")
        window.open('https://os.ac-link.com')
      }
    },
    created() {
      this.$bus.emit('changeTab', 1)
      this.get_ac_info()
    }
  }
</script>

<style lang="scss" scoped>

</style>
